<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="/socket.io/socket.io.js"></script>
		<script src="public/javascripts/libs/jquery-1.7.2.js"></script>
		<script src="public/javascripts/libs/kinetic-v3.8.5.js"></script>
		<script src='public/javascripts/libs/dynatree-1.2.1_rc3/jquery/jquery-ui.custom.js' type="text/javascript"></script>
		<script src='public/javascripts/libs/dynatree-1.2.1_rc3/jquery/jquery.cookie.js' type="text/javascript"></script>
		<script src="public/javascripts/libs/dynatree-1.2.1_rc3/doc/contextmenu/jquery.contextMenu-custom.js" type="text/javascript"></script>
		<link href="public/javascripts/libs/dynatree-1.2.1_rc3/doc/contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" >
		<link rel='stylesheet' type='text/css' href='public/javascripts/libs/dynatree-1.2.1_rc3/src/skin/ui.dynatree.css'>
		<script src='public/javascripts/libs/dynatree-1.2.1_rc3/src/jquery.dynatree.js' type="text/javascript"></script>
		<script src="public/javascripts/libs/FlexBox/js/jquery.flexbox.min.js"></script>
		<link type="text/css" rel="stylesheet" href="public/javascripts/libs/FlexBox/css/jquery.flexbox.css" />
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxbuttons.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxscrollbar.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxpanel.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxtree.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxcheckbox.js"></script>
		<script type="text/javascript" src="public/javascripts/libs/jqwidgets/jqxmenu.js"></script>
		<link rel="stylesheet" href="public/javascripts/libs/jqwidgets/styles/jqx.base.css" type="text/css" />
		<link rel="stylesheet" href="public/javascripts/libs/jqwidgets/styles/jqx.summer.css" type="text/css" />
		<script src="representation/Class.js"></script>
		<script src="representation/Member.js"></script>
		<script src="representation/MemberArray.js"></script>
		<script src="representation/RelationObj.js"></script>
		<script src="representation/RelationObjArray.js"></script>
		<script src="shapes/BasicShape.js"></script>
		<script src="shapes/ClassShape.js"></script>
		<script src="shapes/ShapeArray.js"></script>
		<script src="shapes/Relation.js"></script>
		<script src="shapes/RelationArray.js"></script>
		<script src="shapes/UniRelation.js"></script>
		<script src="shapes/GeneralizationRelation.js"></script>
		<script src="shapes/UnderConstructionRelation.js"></script>
		<script src="Styles/shapeColors.js"></script>
		<script src="userStageActions/UMLCanvas.js"></script>
		<script src="userStageActions/ViewManager.js"></script>
		<script src="userStageActions/treeHelper.js"></script>
		<script src="userStageActions/ModelManager.js"></script>
		<link rel="stylesheet" href="Styles/pageLayout.css" />
		<script type="text/javascript">
			$(document).ready(function() {
				$("#viewTree").dynatree();
				$("#classTree").dynatree();
				$('#modelList').flexbox();
				var mManager = new ModelManager("canvasContainer", 900, 700);
				$("input#addNewView").click(function(event) {
					var viewName = $("input#viewName").val();
					if(viewName != "") {
						if(mManager.currentModel) {
							if(mManager.currentModel.getView(viewName) == null) {
								var command = {
									name : "addView",
									arguments : [mManager.currentModel.name, viewName]
								}
								mManager.run(command);
								$("input#viewName").val("");
							}
						}
					}
				});
				$("input#viewName").keydown(function(event) {
					if(event.which == 13) {
						$("input#addNewView").click();
					} else if(event.which == 27) {
						$("input#viewName").val("");
					}
				});
				$("input#addNewModel").click(function(event) {
					var modelName = $("input#modelName").val();
					if(modelName != "") {
						if(mManager.getModel(modelName) == null) {
							var command = {
								name : "addModel",
								arguments : [modelName]
							}
							mManager.run(command);
							$("input#modelName").val("");
						}
					}
					// mManager.addModel(modelName);
				});
				$("input#modelName").keydown(function(event) {
					if(event.which == 13) {
						$("input#addNewModel").click();
					} else if(event.which == 27) {
						$("input#modelName").val("");
					}
				});
				$("input#saveJSON").click(function(event) {
					var JSON = mManager.getJSON();
					$.ajax({
						url : '/saveModels',
						// the data to send
						// (will be converted to a query string)
						data : JSON,
						// whether this is a POST or GET request
						type : 'POST',
						// the type of data we expect back
						dataType : 'json',
						success : function(json) {
							console.log("successful ajax");
						},
						// code to run if the request fails;
						// the raw request and status codes are
						// passed to the function
						error : function(xhr, status) {
							alert('Sorry, there was a problem!');
							console.log("sorry");
						},
					});
				});
				// $("input#zoomIn").click(function(event) {
				// mManager.stage.setScale(2,2);
				// });
				// $("input#zoomOut").click(function(event) {
				// mManager.stage.setScale(1,1);
				// });
				// $.ajax({
				// url : '/loadModels',
				// data : {
				// method : "get"
				// },
				//
				// type : 'POST',
				// dataType : 'json',
				// success : function(json) {
				// console.log(json);
				// $('#canvasContainer').empty();
				// mManager = new ModelManager("canvasContainer", 1300, 1000);
				// mManager.loadJSON(json);
				// // alert("success");
				// },
				// error : function(xhr, status) {
				// alert('Sorry, there was a problem!');
				// console.log("sorry");
				// },
				// });
				$.ajax({
					url : '/getUserName',
					data : {
						method : "getUserName"
					},
					type : 'POST',
					dataType : 'json',
					success : function(json) {
						//$('#canvasContainer').empty();
						// mManager = new ModelManager("canvasContainer", 1300, 1000);
						mManager.userName = json.userName;
						// alert("success");
					},
					error : function(xhr, status) {
						alert('Sorry, there was a problem!');
						console.log("sorry");
					},
				});
			});

		</script>
		<script type="text/javascript"></script>
		<script type="text/javascript"></script>
		<title> Demo Canvas</title>
	</head>
	<body>
		<div id="header" class="header">
			<!-- <input type="button" value="Save models" id="saveJSON" />
			<input type="button" value="Load commands" id="loadCommands" /> -->
			<!-- <input type="button" value="Zoom in" id="zoomIn" />
			<input type="button" value="Zoom out" id="zoomOut" /> -->
			<!-- <div style="position: relative;float: left;">
			Models
			&nbsp;
			</div>
			<div style="position: relative;float: left;">
			<div id='modelList'></div>
			</div>
			<div style="position: relative;float: left;">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			Add New Model:
			<input type="text" id="modelName" />
			<input type="button" id="addNewModel" value="Add" />
			</div>
			<div style="position: relative;float: left;">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			Add New View
			<input type="text" id="viewName" style="width:100px;" />
			<input type="button" id="addNewView" value="Add" />
			</div>
			<div style="position: relative;float: left;">
			<h1>Sawa</h1>
			</div> -->
			<table width="85%">
				<tr>
					<th align="left" ><img src="Styles/MiniLogo.png" alt="Sawa Logo"/> &nbsp;&nbsp; &nbsp;&nbsp;</th>
					<th>Models</th>
					<th><div id='modelList'></div></th>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					Add New Model:
					<input type="text" id="modelName" />
					<input type="button" id="addNewModel" value="Add" />
					</th>
					<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					Add New View
					<input type="text" id="viewName" style="width:100px;" />
					<input type="button" id="addNewView" value="Add" />
					</th>
				</tr>
			</table>
		</div>
		<br />
		<div id="container">
			<div id="center" class="column">
				<div align="center">
					<input type="button" id="next" value="step by step >" />
					<input type="button" id="toLastExecuted" value="to where I left >>" />
					<input type="button" id="executeAll" value="to the end >>>" />
					&nbsp;&nbsp; &nbsp;&nbsp;
					<input type="button" id="unhighlightAll" value="Unhighlight All" />
				</div>
<!-- 				<div style="overflow:auto;float:none;flo"> -->
					<div id="canvasContainer" style="overflow:auto;float:none;" ></div>
<!-- 				</div> -->
			</div>
			<div id="left" class="column">
				Classes <div id="classTree" ></div>
				<ul id="myMenu" class="contextMenu">
					<li class="add">
						<a href="#add">add</a>
					</li>
					<li class="remove">
						<a href="#remove">remove</a>
					</li>
				</ul>
				<br />
				Views <div id="viewTree"></div>
			</div>
			<div id="right" class="column">
				<!-- 				<textarea id="console" readonly="true"></textarea> -->
				Chat Room
				<input type="text" style="width:95%; border-radius: 5px;" id="chatInput" />
				<div id="chat"    style="background:black;height:300px;width:100%;overflow-y:auto;word-wrap:break-word; border-radius: 5px;"></div>
				<br />
				<br />
				Console <div id="console" style="background:black;height:300px;width:100%;overflow-y:auto; border-radius: 5px; "></div>
			</div>
		</div>
		<div id="footer-wrapper">
			<div id="footer">
				<div align="center">
					<a href="http://www.inf.usi.ch/"> <img src="Styles/footer.png" width="30%" alt="Link to inf.usi.ch"/> </a>
				</div>
			</div>
		</div>
	</body>
</html>
